<template>
	 <!-- v-loading="loading" element-loading-background="rgba(234, 234, 234, 0.8)" -->
	<!-- 健康档案 -->
	<div class="box" id="rightCont">
		<!-- main -->
		<div class="main" id="main">
			<!-- left -->
			
			<!-- right -->
			<div class="main-right">
				<div class="main-icon">
					<div class="main-icon-a">
						<i :class="iconComes" style="border-radius: 50%;font-size: 20px;padding: 6px;margin-left: 8px;background-color: #409EFF;color: #fff;"></i>
						<span style="font-size: 14px;font-weight:300;margin-left: 12px;color: #606266;">{{ CatalogueName }}</span>
					</div>
					<!-- btn1 -->
					<div class="main-icon-b">
						<span style="font-size: 12px;color: #606266;font-weight: bold;">状态：</span>
						<el-dropdown @command="handleCommand" trigger="click">
							<span class="el-dropdown-link">{{ DropDownedName }}<i class="el-icon-down"></i></span>
							<el-dropdown-menu slot="dropdown">
							  <el-dropdown-item command="a">可用</el-dropdown-item>
							  <el-dropdown-item command="b">禁用</el-dropdown-item>
							  <el-dropdown-item command="c" divided>全部</el-dropdown-item>
							</el-dropdown-menu>
					    </el-dropdown>
					</div>
					<!-- btn2 -->
					<div class="main-icon-c">
						<span style="font-size: 12px;color: #606266;font-weight: bold;display: inline-block;width: 68px;">关键字：</span>
						<el-input size="mini" placeholder="编码、名称、拼音简码" suffix-icon="el-icon-Ssearch" v-model="searchValue"></el-input>
					</div>
					<!-- btn3 -->
					<div class="main-icon-c">
						<el-button v-for="(v,i) in headerBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="mini" @click="handClick(i)">{{ v.title }}</el-button>
					</div>
				</div>
				<!-- add data -->
				<!-- messagesBox -->
				<div class="addmessagesBox">
				</div>
				<!-- table -->
				<div class="table">
					<el-table :data="tableData" :max-height="tableHeight" border @row-dblclick="handledbRow" @current-change="handleCurrentTableChange">
						<!-- 自定义插槽 -->
						<!-- <el-table-column label="系统序号" prop="id" width="88"></el-table-column> -->
						<el-table-column label="姓名" prop="name" width="128"></el-table-column>
						<el-table-column prop="sex" sortable label="性别" width="80">
						  <template slot-scope="scope">
						    <span>
						      <i :class="scope.row.sex === 1 ? 'el-icon-male' : 'el-icon-female'" 
						          :style="{color: scope.row.sex === 1 ? '#000039' : '#F56C6C'}"></i>
						      {{ scope.row.sex === 1 ? '男' : '女' }}
						    </span>
						  </template>
						</el-table-column>
						<el-table-column prop="naty" sortable label="民族" width="88">
							 <template slot-scope="{ row }">
								<!-- 根据state显示不同的内容 -->
								<span>{{ minZuMap[row.naty] || '' }}</span>
							</template>
						</el-table-column>
						<el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name" :width="columnWidth(col, tableData)"></el-table-column>
						<!-- fixed -->
						<el-table-column fixed="left" label="行号" type="index"></el-table-column>
						<!-- edit -->
						<el-table-column fixed="right" label="操作" width="88">
						      <template slot-scope="scope">
								  <div class="editbox" style="text-align: center;">
									<!-- <el-button type="primary" @click="handleClickEdit(scope.row)" size="mini">编辑</el-button> -->
									<!-- <el-button type="danger" @click="handleDelete(scope.row.id)" size="mini">删除</el-button> -->
								  </div>
						      </template>
						</el-table-column>
					</el-table>
				</div>
				<!-- 分页 -->
				<el-pagination
				style="margin: 12px;"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageNum"
				:page-sizes="[20, 50, 100]"
				:page-size="pageSize"
				:total="totalSize"
				layout="total, sizes, prev, pager, next, jumper"
				background
				>
				</el-pagination>
				<div class="feetbtn">
					<el-button v-for="(v,i) in feetBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="small" plain
					 @click="feetHandClick(v)">{{ v.title }}</el-button>
				</div>
			</div>
		</div>
		<!-- 新增等Model -->
		<div class="addModel">
			<addModel ref='sonRef' :parent-method="loadData"></addModel>
		</div>
	</div>
</template>/

<script>
	// selfs / js
	import Chinese from "@/external/PY.js";
	import Pinyin from "@/external/pinyin.js";
	import addModel from './addHeal.vue'
	// 接口
	import {docphrpage} from "@/api/Outpatient/Healthrecords.js";
import { dict } from "@/api/staff/staff.js";	
	export default {
		components: {
			addModel
		},
		watch: {
		    // 监听路由变化重新初始化按钮
		    '$route.path'(newPath) {
		      this.initButtons();
		    }
		},
		data() {
			return {
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				// str
				watch:'查看',
				tableHeight:'600', // table的高度，以便超出高度显示滚动条
				windowWidth:'', //右侧表格动态宽度
				searchValue:'',
				toCodeNum:'0000',//拼接自增 导零
				iconHandleClick:'el-icon-plus',
				CatalogueName:'健康档案',
				DropDownedName:'可用',
				typeValue:'',
				YNuseVaule:'可用',
				nowDateTimeValue:'',
				iconComes:'el-icon-jkda',
				operatingTime:'',
				// boolean
				disabled:true,
				loading:false,
				// number
				dataIndex: 0,
				CodeNumber:0,
				pageNum: 1, //当前页currentPage
				pageSize: 20,
				totalSize: 10, //总条数
				currentTable:[],  // 表格单选
				/* obj */
				// 新增
				addForm: {
				  	code: "",
				  	gradeCode: "001",
				  	label: "",
				  	operatingTime: "",
				  	operator: "",
				  	remark: "",
				  	status: "",
				  	typeName: ""
				},
				// arr
				data: [],
				minZuMap:{
					1: '数据不对，默认admin',
					// ...待接口响应
				},
				// feetBtn:[
				//  { refesh:"refesh", label:"新增", type:"primary", icon:"el-icon-edit" },
				//  { refesh:"refesh", label:"修改", type:"primary", icon:"el-icon-finished" },
				//  { refesh:"refesh", label:"删除", type:"primary", icon:"el-icon-document-checked" },
				//  { refesh:"refesh", label:"查看", type:"primary", icon:"el-icon-sort" },
				//  { refesh:"refesh", label:"打印", type:"primary", icon:"el-icon-printer" },
				//  { refesh:"refesh", label:"导出", type:"primary", icon:"el-icon-finished" },
				//  { refesh:"refesh", label:"关闭", type:"primary", icon:"el-icon-close" },
				//  ],
				// 页面默认按钮// 基础按钮配置（始终显示）
				defaultButtons:[
					// { title:"新增西成药",icon:"el-icon-adds", type:"primary" },
					// { title:"修改西成药",icon:"el-icon-edit", type:"primary" },
					{ title:"查看",icon:"el-icon-watch", type:"primary" },
					// { title:"删除",icon:"el-icon-del", type:"danger" },
					// { title:"目录引用",icon:"el-icon-closeFiles", type:"primary" },
					{ title:"打印",icon:"el-icon-ggml", type:"primary" },
					{ title:"导出",icon:"el-icon-export", type:"primary" },
					{ title:"关闭",icon:"el-icon-close", type:"primary" },
				],
				// 最终使用的按钮数组
				feetBtn: [],
				userInfo: [],
				watchData: [],
				YNuse:[{ id:1,label:'可用',value:1},{ id:0,label:'禁用',value:0}],
				// title右侧按钮
				headerBtn:[
				 { refesh:"refesh", title:"刷新", type:"", icon:"el-icon-refresh" },
				 { senior:"senior", title:"高级", type:"", icon:"" },
				 // { add:"add", title:"新增", type:"warning" },
				],
				// title右侧按钮
				tableRows:[
					{ name:"证件号码", prop:"certno", type:"" },{ name:"出生日期", prop:"brdy", type:"" },
					{ name:"诊所序号", prop:"clinicId", type:"" },{ name:"健康卡号", prop:"patId", type:"" },
					{ name:"联系电话", prop:"tel", type:"" },{ name:"联系地址", prop:"conerAddName", type:"" },{ name:"出生日期", prop:"brdy", type:"" },
					{ name:"联系人类型", prop:"conerCertTypeId", type:"" },{ name:"操作员", prop:"operater", type:"" },{ name:"操作时间", prop:"operatingTime", type:"" },
					{ name:"客户单位", prop:"phrUnt", type:"" }
				],
				elTree:[
					{
						label: '全部',
						path:'',
						title:'',
						icon:'el-icon-news',
						children: [
							{
								label: '居民档案',
								path:'',
								title:'居民档案',
								icon:'el-icon-xxj',
							}, 
							{
								label: '职工档案',
								path:'',
								title:'职工档案',
								icon:'el-icon-shenjingxitong',
							},
							{
								label: '微信档案',
								path:'',
								title:'微信档案',
								icon:'el-icon-xxj',
							}, 
							{
								label: '单位档案',
								path:'',
								title:'单位档案',
								icon:'el-icon-xxj',
							}, 
						]
					}
				],
				tableData: [
					{ num:'1', code:'W000000001',pType:'神',tel:'12345678910',address:'朱雀赵国', label: '逆尘界',healthID:'XN666',IdCard:'WL123666888', status: '可用', nz: '否',operater:'耳根',operatingTime:'2024-12-07 05：36：48',operator:'王林',remark:'王麻子。被称为“王麻子”主要因：杀人如麻‌：王林为了争夺资源和提升自己的实力，经常会有杀戮行为。被其他人所畏惧，给他取了一个“杀人如麻”的外号，就演变成了“王麻子”。' },
					{ num:'2', code:'S000000002',pType:'天帝',tel:'12345678910',address:'下界石村', label: '下界石村',healthID:'WM666',IdCard:'SH6688999', status: '可用', nz: '否',operater:'辰东',operatingTime:'2024-12-07 05：36：48',operator:'石昊',remark:'荒天帝。天资万古无双，为应劫而至，为修道而生，一生中极致辉煌，造就无尽传说，曾下界逆杀七神，曾杀到世间无人敢称尊，曾一人横推异域无人敌，曾他化万古灭尸骸仙帝，曾一剑斩断万古造就完美世界……他的一生无敌灿烂但又孤独冰冷，他就是天帝！荒！' },
					{ num:'3', code:'Y000000003',pType:'天帝',tel:'12345678910',address:'地球北京', label: '北京',healthID:'YF666',IdCard:'YF6688999', status: '可用', nz: '否',operater:'辰东',operatingTime:'2024-12-07 14：16：48',operator:'叶凡',remark:'叶天帝。初为地球上的普通人，机缘巧合被九龙拉棺带到北斗星域，从此走上证道之路。叶凡辗转四方得到许多机遇和挑战，功力激增，眼界也渐渐开阔，在北斗得知自己是荒古圣体，历险禁地，习得源术，斗圣地世家，战太古生物，闯星空古路，阻黑暗动乱，重立天庭。最终以力证道，打破圣体不可成帝的诅咒，成就天帝果位，平定六大禁区，取得万族认可，宇宙共尊。' },
					{ num:'4', code:'L000000003',pType:'魔',tel:'12345678910',address:'阴死之地', label: '‌塑冥',healthID:'SM123666888',IdCard:'SM', status: '可用', nz: '否',operater:'耳根',operatingTime:'2024-12-08 08：56：13',operator:'苏铭',remark:'苏铭,宿命,塑冥,第五真界塑冥族族人，苏战之子，生来夭折，第五真界被破时被苏轩衣利用，导致其身魂分离。苏轩衣用一滴血和暗晨禁术十亿尸魂禁伪造成肉身，带到阴死之地的九阴真界，后被二代蛮神从九阴真界抱回蛮族大陆。仙族攻陷大虞，二代蛮神被分尸，苏铭尸体被帝天所获，发现其尸体中孕育有魂，将其魂沉沦在蛮族大地，以其塑冥天赋实现自己的计划。随着修为的提升，发觉记忆中的层层虚假，自己命运被人操控。为了重新掌握自己的命运，苏铭踏上了这条修命之路。为蛮族四代蛮神，夺厄苍分身，具备灭生之种，一生曲折，造化无尽。' },
					{ num:'5', code:'J000000004',pType:'妖',tel:'12345678910',address:'山海界', label: '‌山海界',healthID:'JZ888',IdCard:'WL', status: '可用', nz: '否',operater:'耳根',operatingTime:'2024-12-08 10：36：42',operator:'孟浩',remark:'方浩，本是东胜星方家嫡长孙，后因七岁劫被其父母带到南天星抚养，在父母离开后独自生活在赵国，本为书生，后因机缘巧合被许清带入靠山宗，成为了封妖一脉的第九代传人，从此以后踏入我命如妖欲封天的修行之路。' },	
					{ num:'6', code:'J000000004',pType:'鬼',tel:'12345678910',address:'魁墓灵溪', label: '‌魁墓灵溪',healthID:'BXC888',IdCard:'BXC', status: '可用', nz: '否',operater:'耳根',operatingTime:'2024-12-08 10：36：42',operator:'白小纯',remark:'青年模样，白白净净，十分无害，身着一身青衫，一脸乖巧，相貌俊朗性格,因从小父母双亡，一心追求长生不死。平时吊儿郎当胆小怕死，但真拼起来很猛，拼起命来很疯，极在意身边人，为了在乎的人可以不顾自身安危，喜好放嘴炮并以此沾沾自喜，赤子之心，心智犹如孩童似乎永远不会成熟似的，行事被动，很少占据主动权' },
				],
				// props
				pickerOptions: {
				  shortcuts: [
					{ text: '今天', onClick(picker) { picker.$emit('pick', new Date()); }}, 
					{ text: '昨天', onClick(picker) { const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit('pick', date);}}, 
					{ text: '一周前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', date);}},
					]
				},
			};
		},
		mounted() {
			this.loadData();
			this.nowDateTime();
			//获取动态盒子宽度，实时赋值给右侧 => this.$refs.mainRight.offsetWidth;
			this.$nextTick(()=>{
				this.updateWindowWidth();
				window.addEventListener('resize', this.updateWindowWidth);
				//  获取字典数据
				this.getditc();
				this.initButtons(); // 引入全局自定义封装方法
			})
			// this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
			// this.addForm.operator = this.userInfo.userName
			//  民族
			this.MZOptions = this.result.data.natyEntities.map(v=>{ return { label: v.name , ...v }});
			// 将 民族 转换为 minZuMap 格式
			this.minZuMap = this.MZOptions.reduce((map, item) => {
				map[item.id] = item.label;  // 使用 id 作为键，label 作为值
				return map;
			}, { 1: '数据不对，默认admin' });  // 保留初始值
		},
		methods: {
			/*
				about tree
			*/
			handleNodeClick(data,e) {
				this.CatalogueName = data.title
				this.iconComes = 'el-icon-' + this.makePy(data.label)
				console.log(this.iconComes);
				this.loadData();
			},
			// 字典数据
			async getditc(){
			   this.result = await dict();
			   // console.log(this.result.data);
			   // 设置本地存储
			   localStorage.setItem('dict', JSON.stringify(this.result.data));
			   //  民族
			   this.MZOptions = this.result.data.natyEntities.map(v=>{ return { label: v.name , ...v }});
			   // 将 民族 转换为 minZuMap 格式
			   this.minZuMap = this.MZOptions.reduce((map, item) => {
			   	map[item.id] = item.label;  // 使用 id 作为键，label 作为值
			   	return map;
			   }, { 1: '数据不对，默认admin' });  // 保留初始值
			   //  婚姻状况
			   this.marryiedOptions = this.result.data.mrgStateEntities.map(v=>{ return { label: v.name , ...v }})
			   //  血型
			   this.bloodOptions = this.result.data.aboTypeEntities.map(v=>{ return { label: v.name , ...v }});
			   this.bloodTypeMap = this.bloodOptions.reduce((map, item) => {
			   	map[item.id] = item.label;  // 使用 id 作为键，label 作为值
			   	return map;
			   }, { 1: '数据不对，默认admin' });  // 保留初始值
			   // 暂时过滤掉RH阴性和RH阳性的选项
			   this.bloodOptions = this.bloodOptions.filter(item =>
			     item.name !== 'RH阳性' && item.name !== 'RH阴性'
			   );
			},
			/*
				about table
			*/
		   initButtons() {
		       // 获取当前路由路径
		       const currentPath = this.$route.path;
		       // 获取路由对应的权限按钮
		       const routeButtons = this.$getRouteButtons(currentPath);
		       console.log(routeButtons,'routeButtonsrouteButtons');
		       // 合并到现有按钮数组
		       this.feetBtn = this.$mergeButtons(this.defaultButtons, routeButtons);
		   	console.log(this.feetBtn,'this.feetBtnthis.feetBtn');
		   },
		   // 数据源 毒麻类型
		    async loadData(){
				let res = await docphrpage({
					pageNum:this.pageNum,pageSize:this.pageSize
				})
				this.tableData = res.data.content
		    },
			
		   // col 里面包含了表头字段和名称，list 是表格数据
		       columnWidth(col, list) {
		         let prop = col.prop,lab = col.lab;
		         let width = 40; // 设定一个最小值
		         let maxlenStr = ""; // 最长字符串
		         for (let info of list) {
		           if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
		         }
		         width = Math.max(width, len(lab), len(maxlenStr));
		         // 表格自带的内边距(20px) 自调
		         return width + 12; // 这里加了 12px
		         function len(str) {
		           // 实际分配长度可根据需要自行调整
		           let length = 8;
		           for (const char of str + "") {
		             // 英文小写字符 8px
		             if ("a" <= char && char <= "z") length += 8;
		             // 英文大写字符 8px
		             else if ("A" <= char && char <= "Z") length += 8;
		             // 中文字符 28px
		             else if (char >= "\u4e00" && char <= "\u9fa5") length += 8;
		             // 其他 8px
		             else length += 12;
		           }
		           return length;
		         }
		       },
			// see table
			handleDelete(id){
				this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					}).then(async () => {
						let res = await deleteByPoison(id);
						let { code, message } = res;
						if (res.code === 200) {
							this.$message({
								type: "success",
								message: message,
							});
							this.loadData(); //更新数据驱动
						} else {
							this.$message.error(message);
						}
					})
					.catch(() => {
						this.$message({
							type: "fail",
							message: '失败',
						});
					});
			},
			// edit table
			handleClickEdit(val){
				this.loading = true;
				setTimeout(()=>{
					let param = {
						id:val.id,
						label:'编辑',
						edit:true,
						isShow:true,
						system:true,
					}
					this.loading = false;
					this.$refs.sonRef.open(param);
				},888)
			},
			// 编辑保存
			async saveEditData(){
				console.log(this.form);
				let rs = await updatePoisonAnesthesia(this.form);
				let { code,message } = rs;
				if (code === 200) {
					this.$message({
						type: 'success',
						message: '修改成功！',
					});
					this.loadData(); //更新驱动
					this.dialogVisible = false;
				} else {
					this.$message.error('失败！')
				}
			},
			//新增保存
			addNewData(){
				// let res = await addPoisonAnesthesia(this.addForm)
				console.log(this.addForm);
				//触发验证表单
				this.$refs.addForm.validate(async(valid) => {
				  if(valid){
				    //验证通过
				    // console.log('submit');
				    let res = await addPoisonAnesthesia(this.addForm)
				    console.log(res);
					if (res.code === 200){
					this.$message({
						message:res.message,
						type:"success"
					});
					this.loadData(); //更新数据驱动
					}else{
					  //验证失败
					  console.log('失败');
					}
				}
				});
			},
			// input 
			inputLabel(){
				this.addForm.code = this.makePy(this.addForm.label).toLocaleUpperCase().slice(0,1) + this.formattedNumber + this.CodeNumber;//编码
				this.addForm.textSpell = this.makePy(this.addForm.label).toLocaleUpperCase();//拼音简码
			},
			// 表格单选
			handleCurrentTableChange(val){
				this.currentTable = val
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
				  .then(_ => {
					this.formdisabled = true;
					done();
				  })
				  .catch(_ => {
					this.formdisabled = this.formdisabled;
				  });
			},
			// db events
			handledbRow(row, column, event){
				if(row){ this.form = row; this.dialogVisible = true } else { console.log('fail'); }
				// console.log(this.form);
				this.formdisabled = true
				this.form.textSpell = this.makePy(this.form.label).toLocaleUpperCase()
				// console.log(this.form.textSpell);
			},
			feetHandClick(v){
				// i event
				console.log(v);
				// i event
				// 处理逻辑 => 新增
				if(v.title == '新增' || v.title.includes('新增')){
					// 处理索引2的逻辑 => 新增 -> 调用子组件
					let parma ={
						nameTitle : '新增'
					}
					this.$refs.sonRef.open(parma);
				}
				// 处理逻辑 => 修改
				else if (v.title == '修改' || v.title.includes('修改')){
					// 处理索引1的逻辑 => 修改
					if(this.currentTable.length != 0){
						this.currentTable.nameTitle = '修改'
						console.log(this.currentTable,'this.currentTable');
						this.$refs.sonRef.open(this.currentTable);
					}else{
						this.$message({ type: 'warning', message: '请先选择一条数据'});
					}
				}
				// 处理逻辑 => 查看
				else if(v.title == '查看' || v.title.includes('查看')){
					// 处理索引1的逻辑 => 修改
					if(this.currentTable.length != 0){
						this.currentTable.nameTitle = '查看'
						this.$refs.sonRef.open(this.currentTable);
					}else{
						this.$message({ type: 'warning', message: '请先选择一条数据'});
					}
					
				}
				// 处理逻辑 => 打印
				else if(v.title === '打印' || v.title.includes('打印')){
					this.handlePrint();
				}
				// 处理逻辑 => 导出
				else if(v.title === '导出'){
					this.$confirm('敬请期待')
					.then(_ => {})
					.catch(_ => {});
				}
				// 处理逻辑 => 关闭
				else if(v.title === '关闭' || v.title.includes('关闭')){
					setTimeout(() =>{
						window.history.back();
					},888)
				}
			},
			// 步骤
			handClick(i) {
				// i event
				switch (i) {
					case 0:
						// 处理索引0的逻辑
						this.loading = true;
						if(this.searchValue == ''){
							setTimeout(() => {
								this.$message.error('关键字不能为空！');
								this.loading = false;		
							}, 1500)
						}else{
							this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						}
						break;
					case 1:
						// 处理索引1的逻辑
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
				}
			},
			handleCommand(command) {
			  // console.log(command);
			  // 根据 command 值执行相应的逻辑
			  switch (command) {
				case 'a':
				  // 处理a的逻辑
				  console.log('执行A逻辑');
				  this.DropDownedName = '可用'
				  break;
				case 'b':
				  // 处理b的逻辑
				  console.log('执行B逻辑');
				  this.DropDownedName = '禁用'
				  break;
				case 'c':
				  // 处理b的逻辑
				  this.DropDownedName = '全部'
				  break;
				// ... 其他 case
			  }
			},
			//分页
			//每页条数改变触发
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageNum = val;
				this.loadData();
			},
			//当前条数改变触发
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.pageNum = val;
				this.loadData();
			},
			// 系统当前日期时间
			nowDateTime(){
				const now = new Date(); //创建时间日期对象
				const year = now.getFullYear(); //年
				const month = now.getMonth() + 1; //月份是从0开始的
				const day = now.getDate(); //日
				const hours = now.getHours(); //小时
				const minutes = now.getMinutes(); //分钟
				const seconds = now.getSeconds(); //秒
				const currentDate = `${year}-${month}-${day}`.replace(/-/g, '') //替换操作
				this.nowDateTimeValue = `${year}-${month}-${day}` + ` ` + `${hours}:${minutes}:${seconds}`
				// this.datetimesinglend = 
				// 将字符串转换为Date对象
				// console.log(this.nowDateTimeValue);
			},
			// 实时宽度
			updateWindowWidth() {
				this.windowWidth = window.innerWidth - 288;
			},
		}
	}
</script>

<style lang="less" scoped>
	.box {
	  height: calc(100vh - 64px); // 减去导航栏高度
	  width: 100%;
	  overflow: hidden;
	
		/deep/ .el-table {
	    width: 100% !important;
	    
	    .el-table__body-wrapper {
	      overflow-x: auto !important;
	    }
	    
	    .el-table__header-wrapper {
	      overflow-x: hidden !important;
	    }
		/* 小眼睛图标样式 */
		.el-icon-watch {
		  color: #409EFF;
		  &:hover {
		    color: #66b1ff;
		  }
		}
		.el-icon-shield {
		  color: #F56C6C;
		  &:hover {
		    color: #f78989;
		  }
		}
	}
	/deep/ .el-switch__label *{
		font-size: 12px;
	}
	/deep/ .el-table .cell{
		font-size: 12px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	/deep/ .el-table th{
		font-size: 12px;
		background-color: #f1f1f1;
		border: none;
		color: #2d2d2d;
	}
	/deep/ .el-table {
	    width: 100%;
	    // height: 100% !important;
	    .el-table__body-wrapper {
	      overflow-x: hidden;
	    }
	}
	/* 自定义高亮颜色 */
	::v-deep .el-table__body tr.current-row > td {
	  background-color: #55aaff !important;
	  color: #f9f9f9; /* 可选：修改文字颜色 */
	}
	  .main {
	    display: flex;
	    height: 100%;
	    width: 100%;
	
	    // 左侧树形菜单
	    .main-left {
	      width: 128px;
	      height: 100%;
	      background: #f5f7fa;
	      border-right: 1px solid #e6e6e6;
	      overflow-y: auto;
	      scrollbar-width: none; /* Firefox */
	      -ms-overflow-style: none; /* IE 10+ */
	      
	      &::-webkit-scrollbar {
	        display: none; /* Chrome Safari */
	      }
	
	      /deep/ .el-tree {
	        height: 100%;
	        .el-tree-node__content {
	          height: 36px;
	        }
	      }
	    }
	    
	    // 右侧内容区域
	    .main-right {
	      flex: 1;
	      display: flex;
	      flex-direction: column;
	      height: 100%;
	      overflow: hidden;
	      
	      // 顶部搜索区域
		.main-icon {
			display: flex;
			align-items: center;
			padding: 6px;
			line-height: 40px;
			.main-icon-a{
				// width: 240px;
				// background-color: #00557f;
				background-color: var(--bg-color, #fff);
			}
			.main-icon-b{
				margin-left: 28px;
				/deep/ .el-dropdown{
					font-size: 12px;
					cursor: pointer;
				}
				/deep/ .el-dropdown:hover {
					font-weight: bold;
					color: #66b1ff;
				}
				/deep/ .el-icon--right{
					// background-color: #66b1ff;
				}
				/deep/ .el-popper[x-placement^=bottom]{
					margin-top: 0;
				}
			}
			// c
			.main-icon-c{
				display: flex;
				align-items: center;
				margin-left: 28px;
				/deep/ [data-v-2bacc09b] .el-color-picker__icon, .el-input[data-v-2bacc09b], .el-textarea[data-v-2bacc09b]{
					width: 80%;
				}
			}
		}
	      
	      // 表格容器（带滚动）
	      .table {
	        flex: 1;
			width: 100%;
	        overflow: hidden;
	        display: flex;
	        flex-direction: column;
			/deep/ .el-pagination {
				margin: 12px;
			}
	    }
	      
	      // 底部固定区域
	      .feet {
	        height: 40px;
	        display: flex;
			align-items: center;
	        padding: 12px;
	        background: #fff;
	        border-top: 1px solid #e6e6e6;
	        flex-shrink: 0;
	        
	        .feetBtn {
	          gap: 8px;
	        }
			
	        }
	    }
	  }
		.moreTool{
			/* 高级设置对话框样式 */
			/deep/ .el-dialog__header {
			  background-color: #007bb0;
			  padding: 12px;
			}
			
			/deep/ .el-dialog__title {
			  color: #fff;
			  font-size: 14px;
			}
			
			/deep/ .el-dialog__headerbtn .el-dialog__close {
			  color: #fff;
			}
			
			/deep/ .el-dialog__headerbtn .el-dialog__close:hover {
			  background-color: brown;
			}
		}
		.addModel{
			/deep/ .el-dialog__header{
				padding: 6px;
				background-color: #007bb0;
			}
			/deep/ .el-dialog__body{
				padding: 8px;
			}
			/deep/ .el-dialog__title{
				color: #fff;
				font-size: 12px;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close{
				color: #fff;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
				background-color: brown;
			}
			/deep/ .el-form-item__label{
				font-size: 12px;
			}
		}
		.editModel{
			/deep/ .el-dialog__header{
				padding: 6px;
				line-height: 28px;
				background-color: #007bb0;
			}
			/deep/ .el-dialog__title{
				color: #fff;
				font-size: 12px;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close{
				color: #fff;
			}
			/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
				background-color: brown;
			}
			/deep/ .el-form-item__label{
				font-size: 12px;
			}
		}
	}

</style>